<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>网友Adam分享用Aui-core实现苹果菜单JS特效</title>
<meta name="Keywords" content="Jquery插件,Jquery原创,Jquery资源,Jquery特效,div+css,JquerySchool" />
<meta name="description" content="JquerySchool" />
<style>
body {margin:0;}
#demo {width:100%; position:absolute; bottom:0; text-align:center; margin-top: 20px;}
</style>

<script src="../js/Aui-core-1.42-min.js" language="javascript" type="text/javascript"></script>
<script>
	Aui.ready(function(){
		var odoc = Aui( document ),
		oDiv = Aui( Aui.byID( "#demo" ) ),
		aImg = Aui( Aui.byTagName( "img" ) );	
		odoc.bind( "mousemove", function( e ){
			Aui.each( aImg, function(){
				var _this = Aui( this ),
				x = _this.left( true ) + _this.width()*0.5,
				y = _this.top( true ) + _this.height()*0.5,
				a = x - e.clientX,
				b = y - e.clientY,
				dis = 1 - ( Math.sqrt( Math.pow( a , 2) + Math.pow( b , 2) ) )/400;				
				if( dis < 0.5 ){
					dis = 0.5;
				};
				_this.setStyle("width", dis*128 );
			});
		});
	});
</script>
</head>

<body>

<div id="demo">
    <img src="../img/icon/home_96.png" width="64" />
    <img src="../img/icon/box_96.png" width="64" />
    <img src="../img/icon/broadcast_96.png" width="64" />
    <img src="../img/icon/person_96.png" width="64" />
    <img src="../img/icon/phone_96.png" width="64" />
<!-- 
    <img src="../img/safari.png" width="64" />
    <img src="../img/firefox.png" width="64" />
    <img src="../img/chrome.png" width="64" />
    <img src="../img/opera.png" width="64" />
    <img src="../img/ie.png" width="64" />
 -->
</div>
</body>
</html>